<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>IT云课堂</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<style>
			
			/**导航图标颜色**/
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #4cd964;
			}
		</style>
	</head>

	<body>
		<!--
    	作者：2184291781@qq.com
    	时间：2019-01-06
    	描述：头部
    -->
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">IT云课堂</h1>
		</header>

		<!--主体为子页面-->

		<!--
        	作者：2184291781@qq.com
        	时间：2019-01-06
        	描述：底部导航
        -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active mui-tab-href" href="template/home/home.html">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<span class="mui-tab-label">精选</span>
			</a>
			<a class="mui-tab-item mui-tab-href" href="template/community/community.html">
				<span class="mui-icon mui-icon-bars"></span>
				<span class="mui-tab-label">圈子</span>
			</a>
			<a class="mui-tab-item mui-tab-href" href="template/mine/mine.html">
				<span class="mui-icon mui-icon-person"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
	</body>
	<script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" charset="utf-8" src="js/update.js"></script>
	<script src="js/tools.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
		//判断是否登陆过
		if(!localStorage.getItem("userInfo")){
//			tools.openPage("login.html","login.html");
		}
		//mui初始化
		mui.init();
		//mui加载完成
		mui.plusReady(function() {
			//定义子页面数组
			var subPages = [];
			//取href所在的dom对象
			var href = document.getElementsByClassName("mui-tab-href");
			for(var i = 0; i < href.length; i++) {
				//把每个导航页对应的href放入数组
				subPages[i] = href[i].getAttribute("href");
			}
			//定义主页面的样式,主要是大小位置
			var subPageStyle = {
				top: "44px", //子页面距离顶部高度
				bottom: "50px" //子页面距离底部距离
			};
			//获取主的webview
			var mainView = plus.webview.currentWebview();
			//遍历数组，根据每个url创建webviwe
			for(var i = 0; i < subPages.length; i++) {
				//括号内参数分别为 url id style
				var subView = plus.webview.create(subPages[i], subPages[i], subPageStyle);
				//把子webviwe追加到主的webviwe中 子webviwe默认隐藏
				mainView.append(subView);
			}
			//然后要第一个子webview显示出来 也就是导航微信那页
			//补充：index这页是入口页 默认打开APP时候就是显示webview中,所以不用另外加入webview中
			plus.webview.show(subPages[0]);

			//给每个导航图标注册单击事件
			mui(".mui-bar-tab").on("tap", "a", function() {
				//设置当前点击的导航图标对应的子页面的webview显示,根据指定的id设置
				//id在a标签的href内 取里面的值就行
				var id = this.getAttribute("href");
				plus.webview.show(id);
			})
		});
		
		//如果是电脑浏览器直接跳转打开
		if(!mui.os.plus){
			$(".mui-tab-href").click(function(){
				var href=$(this).attr("href");
				location.href=href;
			});
		}

		//重写安卓返回键,按返回是提示用户选择
		mui.back = function() {
			var btn = ["确定", "取消"];
			mui.confirm('确认要退出么？', '', btn, function(e) {
				if(e.index == 0) {
					localStorage.setItem("pagex", "page1");
					var wvs = plus.webview.all();　　
					var self = plus.webview.currentWebview();　　　
					for(var i = 0, len = wvs.length; i < len; i++) {　　　　　　
						if(wvs[i].id !== self.id || wvs[i].id !== localStorage.homeWebId) {
							wvs[i].close('none');　　　　　　
						}　　
					}　　　　
					self.close('slide-out-right');
				}
			});
		}
	</script>

</html>